const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  mode: "development",
  //入口
  entry: path.join(__dirname, "src", "index.js"),
  //出口
  output: {
    path: path.join(__dirname, "dist"),
    filename: "main.js",
  },
  module: {
    //解析模块的规则
    rules: [
        //关于babel的依赖
        // 1.babel-loader：因为我是用的webpack，要让webpack允许babel来处理js代码。如果不用webpack,需要安装@babel/cli这个依赖。
        // 2.@babel/core：babel的核心库，我们平时说的babel，就是说的它，他提供一个平台，可以拔插想要的预设和插件。实际上实现代码转换的是这些预设和插件，而不是babel本身。
        // 3.@babel/preset-env：它是babel之前一大堆预设的超集，可以对标准的es6语法进行转化。这里安装它就是让它来进行es6转成es5的。     
      {
        test: /\.js$/,//正则匹配.js文件
        loader: "babel-loader",
        include: path.join(__dirname, "src"),//包含
        exclude: /node_modules/,//排除
        // https://blog.csdn.net/weixin_42349568/article/details/125134243
      }
    //   {
    //     test: /\.css$/,
    //     use: [
    //       { loader: 'style-loader' },
    //       {
    //         loader: 'css-loader',
    //         options: {
    //           modules: true
    //         }
    //       }]
    //     }
    ]
  },
  plugins:[
    // 为html文件中引入的外部资源如script、link动态添加每次compile后的hash，防止引用缓存的外部文件问题
    // 可以生成创建html入口文件，比如单页面可以生成一个html文件入口，配置N个html-webpack-plugin可以生成N个页面入口
    new HtmlWebpackPlugin({
      //入口文件
      template: path.join(__dirname, "src", "index.html"),
      filename: "index.html",
    }),
  ],
  devServer: {
    //是一个本地开发服务器，会自动监听变化，自动打包构建，自动更新刷新浏览器
    //https://blog.csdn.net/qq_37833745/article/details/121289187
    port: 8000,
    static: path.join(__dirname, "dist"),
  },
};
